<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" class="mt-10">
                <el-form-item label="应用渠道">
                    <select-app-source v-model="search.source" :type="[5, 6, 9, 10]"></select-app-source>
                </el-form-item>
                <el-form-item label="推广渠道">
                    <el-select v-model="search.channel" clearable class="filter-item" placeholder="推广渠道" style="width: 160px;">
                        <el-option
                            v-for="(item, index) in options.channels"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        style="width: 130px;"
                        v-model="search.day"
                        type="date"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
<!--                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加</el-button>-->
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出报表</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            stripe
            border
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            class="text-center">
            <vxe-table-column title="日期" field="day" min-width="100"/>
            <vxe-table-column title="应用渠道" field="source" min-width="130" formatter="formatAppSourceName"/>
            <vxe-table-column title="推广渠道" field="channel" min-width="140">
                <template slot-scope="scope">
                    <el-tag>{{ options.channels[scope.row.channel].label }}</el-tag>
                </template>
            </vxe-table-column>
            <vxe-table-column title="广告主ID" field="advertiserId" min-width="100"/>
            <vxe-table-column title="广告组ID" field="campaignId" min-width="100"/>
            <vxe-table-column title="广告组名称" field="campaignName" min-width="100"/>
            <vxe-table-column title="项目ID" field="projectId" min-width="100"/>
            <vxe-table-column title="项目名称" field="projectName" min-width="100"/>

            <vxe-table-column title="消耗费用" field="cpaCost" :formatter="['formatHumanRmb', 2]" min-width="100"/>
            <vxe-table-column title="返点" field="rebate" min-width="100"/>
            <vxe-table-column title="实际消耗费用" field="cpaCostActual" :formatter="['formatHumanRmb', 2]" min-width="100"/>
            <vxe-table-colgroup title="前端数据(采集)">
                <vxe-table-column title="激活数" field="active" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="注册数" field="register" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="新增付费人数" field="payFirstUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="付费次数" field="payCnt" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="付费金额" field="pay" :formatter="['formatHumanRmb', 2]" min-width="80"/>
                <vxe-table-column title="激活当日付费金额" field="activeDayPay" :formatter="['formatHumanRmb', 2]" min-width="80"/>
                <vxe-table-column title="激活后24H付费金额(回传时间)" field="active24HourPay" :formatter="['formatHumanRmb', 2]" min-width="80"/>
            </vxe-table-colgroup>

        </vxe-table>

        <el-pagination
            class="pull-right clearfix"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
import dialogForm from './form'

export default {
    components: {
        dialogForm,
    },
    data() {
        return {
            search: {
                day: '',
                source: '',
                channel: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            pageOptions: this.$store.state.backend.pageOptions,
            totalDataNumber: 0,
            options: this.$store.state.appSourceCpa.options,
            form: {
                data: {},
                show: false,
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('appSourceCpa/GetDayCpaCost', filter).then(res => {
                this.tableData = res.data.data;
                this.totalDataNumber = res.data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = moment().format('YYYY-MM-DD')
        },
        create() {
            this.form.data = {};
            this.form.show = true;
        },
        edit(row) {
            this.form.data = row;
            this.form.show = true;
        },
        onFormSubmit() {
            this.form.show = false;
            this.handleSearch();
        },
        onDestroy() {

        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据报表',
                type: 'xlsx'
            })
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>
